<!--商品列表  -->
<template>
  <div class="goods-list">
    <!-- 商品列表的头部 -->
    <!-- 监听事件---接受flag值 -->
    <!-- <goods-header @changHeader="changListFun"></goods-header> -->
    <div class="goods-header">
      <div class="back" onclick="history.back()">
        <i class="iconfont icon-jiantou3"></i>
      </div>
      <div class="search">
        <i class="iconfont icon-sousuo"></i>
      </div>
      <div class="change" @click="changFun">
        <i class="iconfont icon-leimupinleifenleileibie" v-if="changeFlag"></i>
        <i class="iconfont icon-fenlei1" v-else></i>
      </div>
    </div>
    <!-- tab内容 -->
    <div class="goods-tabs">
      <ul>
        <li class="active">
          综合
          <i class="iconfont icon-sanjiao"></i>
        </li>
        <li>新品</li>
        <li>销量</li>
        <li>
          价格
          <i class="iconfont icon-sanjiao"></i>
        </li>
        <li @click="popupFun">
          <i class="iconfont icon-shaixuan"></i>
          筛选
        </li>
      </ul>
    </div>
    <!-- <goods-tabs @openpopup="listPopFun"></goods-tabs> -->
    <mt-popup v-model="popupVisible" position="right">
      <div class="goods-transtion">
        <div class="title">价格区间</div>
        <div class="price-wrap">
          <input type="text" placeholder="最低价" />
          <span></span>
          <input type="text" placeholder="最高价" />
        </div>
        <div class="title">品牌</div>
        <div class="container">
          <ul>
            <li class="active">猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
          </ul>
        </div>
        <div class="footer">
          <button class="reset">重置</button>
          <button class="ok" @click="closePopFun">确定</button>
        </div>
      </div>
    </mt-popup>
    <!-- 商品列表 -->
    <change-list
      :goodslistDatas="goodslistDatas"
      :listChangeFlag="listChangeFlag"
    ></change-list>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import GoodsHeader from "./GoodsHeader.vue";
// import GoodsTabs from "./GoodsTabs.vue";
import ChangeList from "@/components/ChangeList/ChangList.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { ChangeList },
  data() {
    //这里存放数据
    return {
      popFlag: true,
      changeFlag: true,
      popupVisible: false,
      goodslistDatas: [
        {
          goods_id: 1279,
          goods_name: "测试1",
          shop_price: "68.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/202201/thumb_img/0_thumb_P_1642458971446.jpg",
          rz_shop_name: "商创自营",
          sale: 0,
        },
        {
          goods_id: 1278,
          goods_name: "测试1",
          shop_price: "68.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/202201/thumb_img/0_thumb_P_1642458923628.jpg",
          rz_shop_name: "商创自营",
          sale: 0,
        },
        {
          goods_id: 1261,
          goods_name: "测试堂鼠商品",
          shop_price: "0.01",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/202108/thumb_img/0_thumb_P_1630270465209.jpg",
          rz_shop_name: "商创自营",
          sale: 3,
        },
        {
          goods_id: 1250,
          goods_name: "测试库存",
          shop_price: "0.01",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/202103/thumb_img/0_thumb_P_1615502729733.jpg",
          rz_shop_name: "商创自营",
          sale: 1,
        },
        {
          goods_id: 1153,
          goods_name:
            "苏泊尔（SUPOR）电饭煲家用IH加热4升L大容量2-5人智能预约球釜多功能蒸米饭电饭锅小柴火饭 S",
          shop_price: "529.00",
          goods_thumb:
            "https://img14.360buyimg.com/n1/s300x300_jfs/t1/83624/39/1390/119199/5cfb1b19Efeabd927/1f7e9061fa12f294.jpg",
          rz_shop_name: "创造旗舰店",
          sale: 3,
        },
        {
          goods_id: 1277,
          goods_name: "68元福袋领取方法",
          shop_price: "68.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/data/gallery_album/138/thumb_img/138_thumb_G_1638242272071.jpg",
          rz_shop_name: "商创自营",
          sale: 1,
        },
        {
          goods_id: 1276,
          goods_name: "1元福袋领取方法",
          shop_price: "1.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/data/gallery_album/138/thumb_img/138_thumb_G_1638241668686.jpg",
          rz_shop_name: "商创自营",
          sale: 0,
        },
        {
          goods_id: 1271,
          goods_name: "粉丝福袋，点击领取",
          shop_price: "0.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/202111/thumb_img/0_thumb_P_1637364687835.jpg",
          rz_shop_name: "商创自营",
          sale: 0,
        },
        {
          goods_id: 1268,
          goods_name: "遇见仲哥-11.21视频号首播",
          shop_price: "0.01",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/202111/thumb_img/1268_thumb_P_1637264749033.jpg",
          rz_shop_name: "商创自营",
          sale: 0,
        },
        {
          goods_id: 1253,
          goods_name: "堂鼠",
          shop_price: "588.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/202106/thumb_img/0_thumb_P_1622745740463.jpg",
          rz_shop_name: "商创自营",
          sale: 297,
        },
        {
          goods_id: 1252,
          goods_name: "官方吉祥物公仔",
          shop_price: "50.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/202106/thumb_img/0_thumb_P_1622745669324.jpg",
          rz_shop_name: "商创自营",
          sale: 0,
        },
        {
          goods_id: 1251,
          goods_name: "官方吉祥物堂鼠公仔",
          shop_price: "50.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/202106/thumb_img/0_thumb_P_1622745264127.jpg",
          rz_shop_name: "商创自营",
          sale: 0,
        },
        {
          goods_id: 1155,
          goods_name:
            "苏泊尔（SUPOR）安全电压力锅 易用大面板 焖香节能煲 开盖收汁一键排压饭煲饭锅官方旗舰店特价家用",
          shop_price: "299.00",
          goods_thumb:
            "https://img14.360buyimg.com/n1/s300x300_jfs/t1/132173/38/6674/188372/5f32a7f0E83623b6a/f36c13d3e534550e.jpg",
          rz_shop_name: "创造旗舰店",
          sale: 0,
        },
        {
          goods_id: 1154,
          goods_name:
            "九阳（Joyoung）电饭煲煮小米饭家用智能可预约多功能焖防溢电饭锅4L可拆内盖清洗 深栗棕F-40",
          shop_price: "279.00",
          goods_thumb:
            "https://img14.360buyimg.com/n1/s300x300_jfs/t1/136652/22/7606/147264/5f3f8d56E7d475354/69f5237f59e881a8.jpg",
          rz_shop_name: "创造旗舰店",
          sale: 0,
        },
        {
          goods_id: 1126,
          goods_name:
            "苏泊尔（SUPOR）电饭煲电饭锅5L大容量智能预约家用智能多功能煮饭锅3-4-6人特色蛋糕煲仔饭 现",
          shop_price: "249.00",
          goods_thumb:
            "https://img14.360buyimg.com/n1/s300x300_jfs/t1/150025/18/1826/160157/5efc59d9E24ac5c67/0468574b944f4edb.jpg",
          rz_shop_name: "创造旗舰店",
          sale: 0,
        },
        {
          goods_id: 961,
          goods_name: "Galanz/格兰仕 P70F23P-G5(SO)机械式家用微波炉",
          shop_price: "399.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201809/thumb_img/_thumb_P_1536547179195.jpg",
          rz_shop_name: "商创自营",
          sale: 0,
        },
        {
          goods_id: 957,
          goods_name:
            "九阳豆浆机家用全自动多功能智能预约官方旗舰店3-4-5人免滤D268",
          shop_price: "499.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_P_1536546120941.jpg",
          rz_shop_name: "商创自营",
          sale: 0,
        },
        {
          goods_id: 850,
          goods_name:
            "华为RW/容威 GL-166迷你电饭锅2人-3人家用宿舍小型1-2-3人正品电饭煲 智能预约 1.8L容量 多功能数码显示屏",
          shop_price: "119.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_P_1490209752717.jpg",
          rz_shop_name: "商创自营",
          sale: 0,
        },
        {
          goods_id: 849,
          goods_name:
            "飞科美的智能家用多功能双胆电压力锅高压锅饭煲正品WCS5025 5L小家电 5L双胆 智能预约 大面板",
          shop_price: "249.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_P_1490209720906.jpg",
          rz_shop_name: "商创自营",
          sale: 0,
        },
        {
          goods_id: 848,
          goods_name:
            "飞利浦TOSOT/大松 GDF-2001C格力电饭煲迷你智能全自动家用 电饭锅1-2人 格力出品 数码显示 智能预约 全国包邮",
          shop_price: "388.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_P_1490209690659.jpg",
          rz_shop_name: "商创自营",
          sale: 2,
        },
        {
          goods_id: 803,
          goods_name:
            "猫人Joyoung/九阳 Y-50C15电压力锅高压锅正品双胆智能预约5L铁釜新品 土灶铁斧 双重安",
          shop_price: "379.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_P_1490175230300.jpg",
          rz_shop_name: "商创自营",
          sale: 0,
        },
        {
          goods_id: 802,
          goods_name:
            "玛克家纺【12期免息】Panasonic/松下 SR-PE401-K 新品可变压力IH电饭煲4L 送豪华大礼",
          shop_price: "2299.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_P_1490175189423.jpg",
          rz_shop_name: "商创自营",
          sale: 0,
        },
        {
          goods_id: 691,
          goods_name:
            "小米 米家IH电饭煲 小米智能家用wifi电饭锅3L手机控制 小米专卖店 正品授权",
          shop_price: "100.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201703/thumb_img/_thumb_P_1490147075195.jpg",
          rz_shop_name: "普陀区 - 万卓有限公司",
          sale: 3,
        },
        {
          goods_id: 648,
          goods_name:
            "姬芮Midea/美的 MB-WFS5017TM电饭煲5L智能正品电饭锅家用3-4-6-7-8人 下单立减20 精研柴火饭 涡轮防溢",
          shop_price: "300.00",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_P_1489105257338.jpg",
          rz_shop_name: "商创自营",
          sale: 33,
        },
      ],
      listChangeFlag: true,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changFun() {
      this.changeFlag = !this.changeFlag;
      //   子传父
      // this.$emit("changHeader", this.changeFlag);
    },
    popupFun() {
      // this.$emit("openpopup", this.popFlag);
      this.popupVisible = !this.popupVisible
    },
    listPopFun(data) {
      // console.log(data);
      this.popupVisible = data;
    },
    changListFun(data) {
      this.listChangeFlag = data;
    },
    closePopFun() {
      this.popupVisible = false;
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$on("changHeader", (data) => {
      console.log(data);
    });
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.goods-list {
  .goods-header {
    width: 100%;
    height: 5rem;
    background-color: #fff;
    display: flex;
    .back {
      width: 10%;
      line-height: 5rem;
      text-align: center;
      color: #ccc;
    }
    .search {
      width: calc(80% - 2rem - 0.2rem);
      margin: 1rem;
      background-color: #fff;
      height: 3rem;
      border-radius: 1.5rem;
      border: 0.1rem solid #ccc;
      position: relative;
      .icon-sousuo {
        position: absolute;
        right: 1rem;
        top: 0.5rem;
      }
    }
    .change {
      width: 10%;
      height: 5rem;
      line-height: 5rem;
      text-align: center;
      i {
        font-size: 2rem;
      }
    }
  }
  .goods-tabs {
    width: 100%;
    height: 3.5rem;
    text-align: center;
    line-height: 3.5rem;
    background-color: #fff;
    border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
    ul {
      display: flex;
      width: 98%;
      padding: 0 1%;
      li {
        width: 20%;
        font-size: 1.3rem;
      }
      .active {
        color: rgb(226, 44, 44);
      }
    }
  }
  .mint-popup {
    width: 90%;
    height: 100%;
    .goods-transtion {
      padding: 1rem;
      .title {
        font-weight: 700;
        font-size: 1.6rem;
      }
      .price-wrap {
        width: calc(100% - 2rem);
        padding: 1rem;
        margin: 1rem 0;
        display: flex;
        height: 4rem;
        justify-content: space-between;
        align-items: center;
        input {
          width: 13.4rem;
          height: 4rem;
          background-color: #f2f2f2;
          border-radius: 2rem;
          text-align: center;
        }
        span {
          width: 1rem;
          height: 0.1rem;
          margin: 0 1rem;
          background-color: #000;
        }
      }
      .container {
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            width: calc(33% - 0.5rem);
            text-align: center;
            line-height: 3.6rem;
            height: 3.6rem;
            background-color: #f2f2f2;
            border-radius: 2rem;
            font-size: 1.6rem;
            margin: 0.5rem 0.3rem;
          }
          .active {
            border: 0.1rem solid rgba(255, 0, 0, 0.5);
            color: #e93422;
            background-color: #faeeec;
          }
        }
      }
      .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5rem;
        background-color: #fff;

        button {
          width: 40%;
          height: 4rem;
          margin: 0.3rem 5%;
          border-radius: 2rem;
          font-size: 1.6rem;
          box-sizing: border-box;
        }
        .reset {
          border: 1px solid rgb(226, 44, 44);
          color: #e93422;
          background-color: #fff;
        }
        .ok {
          background: linear-gradient(-88deg, #ff4f2e, #f91f28);
          color: #fff;
        }
      }
    }
  }
}
</style>
